<template>
    <div id="bg">
        <!-- 
        
        v-bind指令可以将某一元素上的属性，与数据模型进行绑定

总结:拦截方法：
    这里的拦截手段，是通过利用vue,提供的相关指令，将form表单中的onsubmit事件，与vue函数对象集中的submit函数进行联系
    所绑定的那个函数的返回值为布尔类型,为true则表示通过，为false则表示不通过
        -->

        <!-- 

        -->
        <form action="###" id="All">
            <div id="innerBox">
                <!-- 
            关于绑定事件所需注意的要点有以下两个:
            1、使用v-on绑定时，函数名字后面要加括号
            2、使用简写版本@+函数名字的时候，这个函数名字后面不需要加括号
            -->
                <label>姓名: <input type="text" class="basicInfo" placeholder="请输入你的名字" v-model="name" id="write"
                        name="name"></label><br>
                <label>密码: <input type="password" name="password" class="basicInfo" placeholder="请输入你的密码"
                        v-model="password"></label><br>
                <label id="professor">职业: <input type="text" name="profess" placeholder="请输入你的职业" class="basicInfo"
                        v-model="profess"></label><br>
                <label id="grade">学历: <select name="educationGrade" v-model="educationGrade">
                        <option value="professor">专科生</option>
                        <option value="undergraduate" selected>本科生</option>
                        <option value="postgraduate">研究生</option>
                    </select></label><br>
                <el-button class="but but1" @click="submit" :plain="true"> 提交</el-button>
                <el-button  class="but but2" @click="reset">重置</el-button>
                <el-button type="button" class="but but3" @click="back">返回</el-button>
            </div>
        </form>
    </div>

</template>
 

<script>
import { ElMessage } from 'element-plus'


// 这种写法是vue2的写法，但是，我发现这种写法，对于vue3兼容，但是
export default {
    data() {
        return {
            // 姓名
            name: "",
            //密码
            password: "",
            // 职业
            profess: "",
            // 学历
            educationGrade: "",
            // 这是一个向后端传入的js对象数据
            total: {
                name: this.name,
                password: this.password,
                profess: this.profess,
                educationGrade: this.educationGrade
            }
        }
    },
    methods: {
        reset:function(){
            this.name=''
            this.password=''
            this.profess=''
            this.educationGrade=''
            ElMessage(
                {
                    message:"重置成功!",
                    type:'success',
                    plain:true
                }
            )
        },
        back: function () {
            this.$router.push("/login")
        },
        submit: function () {
            /*
这里面有一个细节就是，页面在初始加载的过程中，数据模型中所指定的js对象里对应的值是没有的，而只有将用户点击时，这是重新覆盖js数据才是最好的
            */
            // 阻止表单提交
            this.total.name = this.name
            this.total.password = this.password
            this.total.profess = this.profess
            this.total.educationGrade = this.educationGrade
            var lenName = this.name.length
            var lenPwd = this.password.length
            if (lenName > 10 || lenPwd > 10 || (this.education_grade in ['undergraduate', 'postgraduate', 'professor'])) {
                // alert('用户名或密码长度超过限制' + this.education_grade)
                ElMessage(
                    {
                        message:'用户名或密码长度超过限制',
                        type:"warning",
                        plain:true
                    }
                )
                return
            }
            // 异步请求,与后端服务器进行interaction
            this.$axios.post("http://localhost:520/login", this.total).then(
                (res) => {
                    var realData = res.data.data
                    //这是说明,若后端传的不是error数据，则说明数据库中是有这名用户的，因此就需要生成一个jwt令牌
                    if (realData != "error") {
                        window.localStorage.setItem('token', realData)
                        this.$router.push('/primaryPage')
                    } else {
                        ElMessage(
                            {
                                message: "请先注册!",
                                type: "error",
                                plain: true
                            }
                        )
                    }
                }
            ).catch(
                (event) => {
                    ElMessage(
                        {
                            message:'很抱歉,你的异步请求并没有成功!',
                            type:"error",
                            plain:true
                        }
                    )
                    console.log(event);
                }
            )
        }
    },
    mounted() {
        // 这个函数是用来动态控制画面的，即对画面的自适应
        function f() {
            var bg = document.getElementById('bg')
            bg.style.width = innerWidth
            bg.style.height = innerHeight
            var form_ele = document.getElementById('All')
            /*
            在这里我要强调下，就是背景图片是可以填充在padding区的，但是文字图片不包含在padding区
            */

            // 之所以这样设置，目的在于可以随视图窗口的改变而改变
            form_ele.style.height = 0.3 * innerHeight + 'px'
            form_ele.style.paddingTop = 0.35 * innerHeight + 'px'
            form_ele.style.paddingBottom = 0.35 * innerHeight + 'px'
            form_ele.style.width = innerWidth * 0.4 + 'px'
            form_ele.style.paddingLeft = innerWidth * 0.3 + 'px'
            form_ele.style.paddingRight = innerWidth * 0.3 + 'px'
            form_ele.style.backgroundColor = 'skyblue'
            // 调整不透明度
            form_ele.style.opacity = 0.7
            var innerBox = document.getElementById('innerBox')
            innerBox.style.textAlign = 'center'
            innerBox.style.lineHeight = 0.06 * innerHeight + 'px'
            var grade = document.getElementById('grade')
            grade.style.paddingLeft = 0.128 * innerWidth + 'px'
        }
        // 等页面加载完毕后，再进行执行相关的逻辑
        window.onload = f
        // 增加一个事件监听器
        window.addEventListener('resize', f)
    }
}

/*
前端开发中，我们想要在一个页面中添加多个页面加载函数,即onload函数的话，我们需要调用addEventListener方法,
这个函数接收两个参数,其中第一个是事件类型,第二个是自定义函数
*/
</script>


<style>
* {
    margin: 0;
    padding: 0;
    border: 0;
}

label {
    color: yellow;
    font-size: 20px;
    text-shadow: 2px 1px 1px red;
    font-weight: 100px;
    font-style: oblique;
}

/* 
        label这个标签其实很特殊，为啥这样说那，因为label标签，它不占空间，即所谓的盒子空间，因此在调整上下盒子大小边框，边距大小时
        往往是调整其里面所包含的其他标签
        */
.basicInfo {
    border: 1px solid blue;
    margin-bottom: 10px;
    padding-left: 5px;
}

.but {
    color: yellow;
    font-size: 15px;
    text-shadow: 2px 1px 1px red;
    margin: 15px;
    font-weight: 100px;
    font-style: italic;
}

#bg {
    background: url('../../images/bc.jpg') no-repeat;
    background-size: 100% 100%;
    /*  这个属性可以控制图片的排列布局方式，原本是横向布局
            现在是，纵向布局,即可以调整一个方向
            */
    background-attachment: fixed;
}

#grade {
    float: left;
}
</style>